<template>
    <div class="PersonalInfor">
        <div class="breadcrumb">个人中心-个人信息</div>
        <div class="PersonalInfor_box">
            <el-form ref="form" :model="userInfo" label-width="80px" class="userform">
                <el-form-item class="head" label="头像："  style="display: flex;align-items: center" >
                    <el-upload  style="display: flex;align-items: center;"
                                class="avatar-uploader"
                                :action="imgUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                        <div style="display: flex;align-items: center;">
                            <img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar"  >
                            <span class="formupload" >点击上传</span>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="账号：">
                    <span style="margin-left: 18px">{{userInfo.name}}</span>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input placeholder="请输入" v-model="userInfo.nickName"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input placeholder="请输入" type="number" maxlength="11" :validate-event="true" v-model="userInfo.phone"></el-input>
                </el-form-item>
                <el-button class="lbtn" @click="doSave">保存</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    import validate from '@/assets/utils/validate.js'
    export default {
        name: "PersonalInfor",
        data() {
            return {
                headImage: require('@/assets/logo.png'),
                imgUrl: window.location.href.indexOf('192.168.10.') > -1 ? '/projectName/platform/personalCenter.do' : '/apis/projectName/platform/personalCenter.do',
                userInfo: {
                    headImage: require('@/assets/logo.png'),
                    phone:"",
                    nickName:""
                }
            }
        },
        methods: {
            check() {
                if (!validate.isPhone(this.userInfo.phone)) {
                    _g.message('请输入正确手机号', 'warning')
                    return false
                }
                if (this.userInfo.phone == '') {
                    _g.message('手机号不能为空', 'warning')
                    return false
                }
                if (this.userInfo.nickName == '') {
                    _g.message('昵称不能为空', 'warning')
                    return false
                }
                return true;
            },
            handleAvatarSuccess(res, file) {
                this.userInfo.headImage = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            doSave() {
               if(this.check()){
                    this.lAxios({
                        method: "post", //方法
                        url: "/platform/personalCenter.do", //路径，基础路径在main.js里面配置
                        params: {
                            //传参
                            nickName: this.userInfo.nickName,
                            phone: this.userInfo.phone
                        }
                    }).then(res => {
                        //成功的回调函数
                        this.$message.success('修改成功');
                        console.log(res.status)
                        localStorage.setItem("userInfo", JSON.stringify(res.data.data))
                        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
                        setTimeout(()=>{
                            window.location.reload();
                        },600)
                    }).catch(err => {
                        //失败的回调函数
                        this.$message.error(err);
                    });
                }
            },
            init() {
                this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style lang="scss">
    .PersonalInfor {
        width: 100%;
        height: 100%;
        background-color: white;
        .breadcrumb {
            padding: 10px;
            font-size: 14px;
            color: #333;
            background-color: #F7F9FC;
            background-clip: border-box;
        }
        .PersonalInfor_box {
            .userform {
                width: 400px;
                margin: 100px auto;
                img {
                    width: 80px;
                    height: 80px;
                    border-radius: 40px;
                }
                .head .el-form-item__content{
                  margin-left:0px !important;
                }
                .formupload {
                    color: #37f;
                    margin-left: 10px;
                }
                .lbtn {
                    margin: 20px auto;
                    margin-left: 120px;
                    width: 140px;
                    height: 50px;
                    background-color: #37f;
                    border: none;
                    color: #fff;
                    font-size: 20px;
                }
            }
        }

    }
</style>
